<html>
    <head>
        <title>Itowns - Globe WFS color</title>

        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>
        <script src="js/GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="js/GUI/LoadingScreen.js"></script>
        <script src="js/plugins/FeatureToolTip.js"></script>
        <script src="../dist/debug.js"></script>
        <script type="text/javascript">
            /* global itowns,document,GuiTools, window, debug, setupLoadingScreen */
            // Define initial camera position
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 4.818, 45.7354),
                range: 3000,
            }

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, placement);
            var menuGlobe = new GuiTools('menuDiv', view);
            var d = new debug.Debug(view, menuGlobe.gui);
            setupLoadingScreen(viewerDiv, view);
            FeatureToolTip.init(viewerDiv, view, { filterAll: false });

            // Add one imagery layer to the scene
            // This layer is defined in a json file but it could be defined as a plain js
            // object. See Layer* for more info.
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer('Ortho', config);
                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
            });

            // Add two elevation layers.
            // These will deform iTowns globe geometry to represent terrain elevation.
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
            }
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);

            var wfsBuildingSource = new itowns.WFSSource({
                url: 'https://data.geopf.fr/wfs/ows?',
                version: '2.0.0',
                typeName: 'BDTOPO_V3:batiment',
                crs: 'EPSG:4326',
                extent: {
                    west: 4.568,
                    east: 5.18,
                    south: 45.437,
                    north: 46.03,
                },
                ipr: 'IGN',
                format: 'application/json',
            });

            function colorBuildings(properties) {
                if (properties.usage_1 === 'Résidentiel') {
                    return '#FDFDFF';
                } else if (properties.usage_1 === 'Annexe') {
                    return '#C6C5B9';
                } else if (properties.usage_1 === 'Commercial et services') {
                    return '#62929E';
                } else if (properties.usage_1 === 'Religieux') {
                    return '#393D3F';
                } else if (properties.usage_1 === 'Sportif') {
                    return '#546A7B';
                } else {
                    return '#555555';
                }
            }

            var wfsBuildingLayer = new itowns.ColorLayer('wfsBuilding', {
                transparent: true,
                style: {
                    fill: {
                        color: colorBuildings,
                        opacity: 0.7
                    },
                    stroke: {
                        color: colorBuildings,
                        width: 2.0,
                    },
                },
                source: wfsBuildingSource,
                zoom: { max: 20, min: 13 },
            });
            view.addLayer(wfsBuildingLayer);
            FeatureToolTip.addLayer(wfsBuildingLayer, {
                filterGeometries: function _(features, layer) {
                    var idList = [];
                    return features.filter(function _(f) {
                        if (!idList.includes(f.geometry.properties.id)) {
                            idList.push(f.geometry.properties.id);
                            return f;
                        }
                    });
                }
            });

            // Listen for globe full initialisation event
            view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
                // eslint-disable-next-line no-console
                console.info('Globe initialized');
                itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
            });
            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
</script>
    </body>
</html>
